<template>
  <div>
    <van-toast id="van-toast" />
    <!-- <h1>手机归属地查询</h1> -->
    <van-nav-bar
      title="يانفۇن نومۇر ئادىرىسنى تەكشۈرۈش"
      left-text="قايتىش"
      left-arrow
      @click="backToDefault"
    />
    <div class="inputContainer">
      <input
        class="input"
        type="number"
        placeholder="تەۋەلىك ئادىرىسىنى تەكشۈرمەكچى بولغان يانفۇن نومۇرنى كىرگۈزۈڭ"
        placeholder-style="font-size:12px;font-family:'Alp Ekran'"
        v-model="phoneNumber"
      >
    </div>
    <div
      class="btnContainer"
      style="padding-bottom:12px;"
    >
      <div
        class="btn bubble left"
        @click="getPhoneAddress"
      >ئىزدەش</div>
    </div>
    <div class="advertise">
      <ad unit-id="adunit-9155bec8aa4c0615"></ad>
    </div>
    <div v-show="phoneFlag">
      <div class="yui">
        <div class="yui-header">
          <span
            class="icon"
            @click="setClipboard"
          >
            <img src="../../../static/img/tabbar/copy.png">
          </span>
          <span class="headerTxt">تەۋە ئادىرىسى</span>
        </div>
        <div class="content">
          <span class="contentTxt">{{address}}</span>
        </div>
      </div>
      <div style="padding-top:15rpx;"></div>
      <div class="yui">
        <div class="yui-header">
          <span
            class="icon"
            @click="setClipboard"
          >
            <img src="../../../static/img/tabbar/copy.png">
          </span>
          <span class="headerTxt">تەۋە خەۋەرلىشىش شىركىتى</span>
        </div>
        <div class="content">
          <span class="contentTxt">{{types}}</span>
        </div>
      </div>
      <div style="padding-top:15rpx;"></div>
      <div class="yui">
        <div class="yui-header">
          <span class="icon">
            <img src="../../../static/img/tabbar/copy.png">
          </span>
          <span class="headerTxt">پوچتا نومۇرى</span>
        </div>
        <div class="content">
          <span class="contentTxt">{{zipcode}}</span>
        </div>
      </div>
      <div style="padding-top:15rpx;"></div>
      <div class="yui">
        <div class="yui-header">
          <span class="icon">
            <img src="../../../static/img/tabbar/copy.png">
          </span>
          <span class="headerTxt">رايون نومۇرى</span>
        </div>
        <div class="content">
          <span class="contentTxt">{{cityCode}}</span>
        </div>
      </div>
      <div class="deleteBtn">
        <!-- <van-button plain type="danger" size="large">ئۆچۈرۈش</van-button> -->
      </div>
    </div>

  </div>
</template>
<script>
import qs from "qs";
import { showToast, showSuccess } from "@/util";
export default {
  props: ["message"],
  data() {
    return {
      phoneFlag: false,
      phoneNumber: "",
      types: "",
      address: "",
      prov: "",
      zipcode: "",
      cityCode: "",
      list: {
        ret: 200,
        msg: "success",
        data: {
          types: "中国联通",
          lng: "121.473701",
          city: "上海",
          num: 1312206,
          isp: "联通",
          area_code: "310100",
          city_code: "021",
          prov: "上海",
          zip_code: "200000",
          lat: "31.230416"
        },
        log_id: "8CE49C3A-AAAE-4F30-87F9-4E067CC54EFF"
      }
    };
  },
  methods: {
    backToDefault() {
      //   console.log('正在传值....')
      this.$emit("flagValue", 0);
    },
    getPhoneAddress() {
      var that = this;
      let myreg = /^[1][3,4,5,7,8][0-9]{9}$/;
      if (!myreg.test(this.phoneNumber)) {
        showToast("توغرا يانفۇن نومۇرنى كىرگۈزۈڭ");
      } else {
        let url =
          "https://hcapi04.market.alicloudapi.com/mobile?mobile=" +
          this.phoneNumber;
        this.$http
          .get(url)
          .then(res => {
            this.phoneFlag = true;
            this.zipcode = res.data.data.zip_code;
            this.cityCode = res.data.data.city_code;
            let prov = res.data.data.prov;
            let city = res.data.data.city;
            let types = res.data.data.types;
            let allTxt = prov.concat(city);
            let tranUrl = "https://wx.2xur7.cn/weapp/dict";
            var postList1 = {
              txt: allTxt,
              from: "zh"
            };
            var postList2 = {
              txt: types,
              from: "zh"
            };
            this.$http.post(tranUrl, postList1).then(res => {
              this.address = res.data.data.res_txt;
              this.$http.post(tranUrl, postList2).then(res => {
                this.types = res.data.data.res_txt;
              });
            });
          })
          .catch(err => {
            console.log(err);
          });
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.btnContainer {
  width: 96%;
  margin: 0 auto;
  padding-top: 10rpx;
}

.btnContainer .btn {
  border: solid 1px #1abc9c;
  margin: 0 auto;
  position: relative;
  color: #1abc9c;
  font-size: 16px;
  line-height: 75rpx;
  box-shadow: inset 0 0 0 1px rgba(26, 188, 156, 0.1);
  height: 78rpx;
  overflow: hidden;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  text-transform: uppercase;
  border-radius: 3px;
}

.inputContainer {
  padding-top: 15rpx;
  border-radius: 14rpx;
  margin: 10rpx auto;
  width: 95%;
  border: 1px solid #efeff4;
  // box-shadow: 0 1rpx 1rpx rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 15rpx 1px rgba(0, 0, 0, 0.08);

  // box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.1);
  .input {
    color: #1c2438;
    padding-bottom: 15rpx;
    padding-left: 20rpx;
    font-size: 34rpx;
  }
}
.deleteBtn {
  width: 95%;
  margin: 0 auto;
  padding-top: 12rpx;
}
.yui {
  color: #1c2438;
  width: 95%;
  margin: 9rpx auto;
  min-height: 150rpx;
  border: 1px solid #efeff4;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  border-radius: 24rpx;
}

.yui .yui-header {
  border-bottom: 2px solid #efeff4;
  height: 85rpx;
  border-radius: 2px 2px 0 0;
  font-size: 31rpx;
  text-align: right;
  display: flex;
  justify-content: space-between;
}

.yui .yui-header .headerTxt {
  line-height: 100rpx;
  margin-right: 32rpx;
  text-align: right;
}

.yui .yui-header .icon img {
  margin-left: 30rpx;
  padding-top: 32rpx;
  width: 40rpx;
  height: 40rpx;
}

.yui .content {
  margin: 20rpx auto;
  min-height: 80rpx;
}

.yui .content span::before {
  content: "\2003\2003";
}

.yui .content .contentTxt {
  margin-right: 20rpx;
  text-indent: 35rpx;
  text-align: right !important;
  font-size: 28rpx;
}

.yui .footer {
  height: 50px;
  border-top: 2px solid #efeff4;
  text-align: right;
}
</style>
